<template>
	<view class="top">
		<uni-notice-bar v-if="showPriceFlag" single text="若价格为0则为尚未报价,请联系工作人员"></uni-notice-bar>
		<uni-section class="mb-10" title="商户">
			<template v-slot:right>
				{{orderData.nickname}}
			</template>
		</uni-section>
		<uni-section class="mb-10" title="款号">
			<template v-slot:right>
				{{orderData.ddkh}}
			</template>
		</uni-section>
		<uni-section class="mb-10" title="首次下单时间">
			<template v-slot:right>
				{{orderData.xdtime}}
			</template>
		</uni-section>
		<uni-section v-if="showPriceFlag" class="mb-10" title="单件价格小计">
			<template v-slot:right>
				{{priceTotal}}元
			</template>
		</uni-section>

		<button style="background-color: #e08020;" @click='getSpPriceByOrder'>获取价格</button>

	</view>
	<view class="mid">
		<view class="spCard" v-for="item in spData">
			<view class="imgCon"><img :src="staticSp + item.spPic" alt="暂无" @click='clickImg(this.staticSp + item.spPic)' style="width: 100%;height: 100%;"></view>
			<view class="textCon">
				<view class="tConL">品名:{{item.spName}}</view>
				<view class="tConL">用量:{{item.spNum}}</view>
				<view v-if="showPriceFlag" class="tConR">单价:{{item.spPrice}}</view>
			</view>
		</view>
	</view>
	<view class="btm"></view>
</template>

<script>
	import config from "../../../utils/config.js"
	export default{
		onLoad: function(option) {
			this.orderId = option.orderId
			this.getOrderDetailByOrderId()
		},
		data(){
			return {
				staticSp: config.staticSp,
				orderId:'',
				orderData:{},
				spData:[],
				showPriceFlag : false,
				priceTotal: 0,
			}
		},
		methods:{
			// 获取本订单详情
			getOrderDetailByOrderId(){
				let that = this
				this.request({
					url: config.baseUrl + "/wx/getOrderDetailByOrderId",
					data: {'orderId': that.orderId}
				}).then(res => {
					that.orderData = res.orderData[0]
					that.spData = res.spData
				})
			},
			// 获取商品交易价格
			getSpPriceByOrder(){
				let that = this
				this.request({
					url: config.baseUrl + "/wx/getSpPriceByOrder",
					data: {'spList': JSON.stringify(that.spData), 'orderData': that.orderData}
				}).then(res => {
					let data = res.data
					let total = 0
					for (let i = 0;i<data.length;i++){
						for (let j = 0;j<that.spData.length;j++){
							if (String(that.spData[j]['spId']) === String(data[i]['spID'])){
								that.spData[j]['spPrice'] = data[i]['price']
								total += Number(that.spData[j]['spNum']) * Number(that.spData[j]['spPrice'])
								break
							}
						}
					}
					that.priceTotal = total.toFixed(2)
					that.showPriceFlag = true
				})
			},
			// 点击图片放大
			clickImg(imgUrl) {
				console.log('wh')
				wx.previewImage({
					urls: [imgUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},

		},
	}
</script>

<style lang="scss">
	.top{}
	.mid{
		background-color: #eee;
		height: 1200rpx;
		.spCard{
			width: 350rpx;
			margin: 10rpx;
			border-radius: 20rpx;
			float: left;
			background-color: #fff;
			
			.imgCon{
				width: 300rpx;
				height: 300rpx;
				margin: 25rpx;
			}
			.textCon{
				margin-left: 20rpx;
				margin-bottom: 20rpx;
				
				.tConL{
					
				}

			}
		}
	}
</style>